<template>
	<view class="">
		<uni-card v-for="(confessionWallInfo, index) in confessionWallInfoList" @click="onClick" :key="index">
			<div style="display: flex; justify-content: space-between; height: 30px;">
				<div style="text-overflow: ellipsis;overflow: hidden; flex: 3;">
					<span style="font-weight: bolder;">发布时间：</span><span>{{confessionWallInfo.releaseTime}}</span>
				</div>
			</div>

			<div style="display: flex; flex-direction: row; margin-bottom: 10px;">
				<img v-for="(confessionWallImg, index2) in confessionWallInfo.confessionWallImgs === '' ? '' : JSON.parse(confessionWallInfo.confessionWallImgs)"
					:key="index2" style="width: 33%; height: 100px; margin: 0 2px; "
					@click="clickImg(index2, confessionWallInfo.confessionWallImgs)" :src="imgBaseUrl + confessionWallImg">
				</img>
			</div>

			<text class="uni-body" style="text-decoration: underline; font-size: 20px;color: red;"
				@click="goToInfo(confessionWallInfo)">{{confessionWallInfo.wallCopy}}</text>

			<view slot="actions" class="card-actions"
				style="display: flex; justify-content: space-around; padding: 5px 0;">
				<view style="display: flex;" class="card-actions-item" @click="actionsClick('暂时无法分享')">
					<uni-icons type="chatbubble" size="18" color="#0082F3"></uni-icons>
					<text class="card-actions-item-text">分享</text>
				</view>
				<view class="card-actions-item" style="display: flex;" @click="actionsClick('点赞', confessionWallInfo)">
					<uni-icons type="heart" size="18" color="#E90B3D"></uni-icons>
					<text class="card-actions-item-text">点赞 : {{confessionWallInfo.praiseQuantity}}</text>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import {mapActions, mapState} from 'vuex'
	import baseUrl from '../../publicData/baseUrl.js'
	export default {
		name: "confessionWall",
		data() {
			return {
				confessionWallImgs: [],
				imgBaseUrl: baseUrl.imgBaseUrl,
			}
		},
		
		computed: {
			...mapState('confessionWallModule', ["confessionWallInfoList"]),
			...mapState('publicModule', ["token"])
		},

		// 下拉刷新事件
		onPullDownRefresh() {
			this.getConfessionWallInfoList({
				token: this.token
			})
			uni.stopPullDownRefresh()
		},
		
		// 页面加载周期函数
		onLoad() {
			this.getConfessionWallInfoList({
				token: this.token
			})
		},
		
		// 上拉触底
		 

		methods: {
			
			...mapActions('confessionWallModule', ["getConfessionWallInfoList"]),

			// 点击卡片的时间处理函数
			onClick(e) {
				console.log(e)
				// console.log(expressLoveText)

			},

			// 去看详情！
			goToInfo(confessionWallInfo) {
				uni.navigateTo({
					url: '../../packagesConfessionWall/confessionWallInfo?confessionWallInfo=' + JSON.stringify(
						confessionWallInfo)
				})
			},

			// 点击分享、点赞、评论点击事件处理函数
			actionsClick(text, confessionWallInfo) {

			},

			// 点击图片放大预览
			clickImg(index, confessionWallImgs) {
				const that = this
				let Imgs = JSON.parse(confessionWallImgs).map(item => {
					return that.imgBaseUrl + item
				})
				
				wx.previewImage({
					urls: Imgs, //需要预览的图片 http 链接列表，多张的时候，url直接写在后面就行了
					current: Imgs[index], // 当前显示图片的 http 链接，默认是第一个
				})
			}
		}
	}
</script>

<style scoped>

</style>